<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib prefix="mytag" uri="/WEB-INF/tag/tag.tld" %>
<!DOCTYPE html>
<html lang="zh">
<head>
	<mytag:head title="农产品信息管理系统-首页" defineJs="/base/js/jquery.particleground.min.js" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="/base/js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
	<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
	<title><spring:message code="system"/>-首页</title>
	<style>
		/* CSS样式 */
		.slideBox {
			height: 450px;
			overflow: hidden;
			position: relative;
			z-index: 2;
			margin-bottom: 20px;
		}
		.slideBox .hd {
			height: 30px;
			left: 0;
			position: absolute;
			text-align: center;
			top: 405px;
			width: 100%;
			z-index: 20;
		}
		.slideBox .hd .smallUl {
			height: 30px;
			width: 200px;
			line-height: 30px;
			margin: 0 auto;
			position: relative;
			z-index: 21;
			text-align: center;
			/*background-color: #fff;*/
			opacity: 0.8;
			-moz-opacity: 0.8;
			filter: alpha(opacity=80);
			margin: 0 auto;
			border-radius: 20px;
			-moz-border-radius: 20px;
			-webkit-border-radius: 20px;
		}
		.slideBox .hd .smallUl li {
			margin-top: 8px;
			background: #000;
			border-radius: 50%;
			box-shadow: 0 0 3px;
			color: #fff;
			cursor: pointer;
			display: inline-block;
			zoom: 1;
			height: 15px;
			line-height: 15px;
			margin-right: 10px;
			opacity: 0.8;
			-moz-opacity: 0.8;
			filter: alpha(opacity=80);
			width: 15px;
			font-size: 0px;
			text-align: center;
			overflow: hidden;
		}
		.slideBox .hd ul li.on {
			background: #CC0000;
			color: #fff;
			filter: alpha(opacity=80);
			opacity: 0.8;
		}
		.slideBox .bd {
			position: relative;
			height: 100%;
			z-index: 0;
		}
		.slideBox .bd li {
			zoom: 1;
			vertical-align: middle;
		}
		.slideBox .bd img {
			height: 450px;
			display: block;
		}
		.slideBox .prev, .slideBox .next {
			position: absolute;
			left: 3%;
			top: 50%;
			margin-top: -25px;
			display: block;
			width: 50px;
			height: 60px;
			background: url(/base/img/slider-arrow.png) -100px 15px no-repeat #000;
			filter: alpha(opacity=30);
			opacity: 0.3;
			z-index:1111
		}
		.slideBox .next {
			left: auto;
			right: 3%;
			background-position: 15px 15px;
		}
		.slideBox .prev:hover, .slideBox .next:hover {
			filter: alpha(opacity=70);
			opacity: 0.7;
		}
		.slideBox .prevStop {
			display: none;
		}
		.slideBox .nextStop {
			display: none;
		}
		/***********切换样式属性**********/
		.slideGroup{ width:955px;  text-align:left; height:270px; margin-bottom:20px;  }
		.slideGroup .parHd{
			height:40px;
			line-height:40px;
			background:#fff;
			padding:0px;
			border-bottom:1px solid #ddd;
			border-top:2px solid #F93;
			position:relative;
		}
		.slideGroup .parHd ul{ float:left; position:absolute; height:40px;   }
		.slideGroup .parHd ul li{ float:left;  width:190px; text-align:center;cursor:pointer; border-right:1px solid #ddd;  }
		.slideGroup .parHd ul li.on{ height:40px;  background:#F93; color:#FFF; }
		.slideGroup .slideBoxs{ overflow:hidden; zoom:1; padding:10px 0 10px 45px; position:relative;   }
		.slideGroup .sPrev,
		.slideGroup .sNext{
			position:absolute;
			left:0px;
			top:70px;
			display:block;
			width:40px;
			height:70px;
			background: url(../../images/indexhead_sprite.png) -20px 15px no-repeat #000000;
			opacity: 0.3;
			-moz-opacity: 0.3;
			filter: alpha(opacity=30);
		}
		.slideGroup .sNext{ left:auto; right:0px;	background: url(../../images/indexhead_sprite.png) -65px 15px no-repeat #000000;   }
		.slideGroup .sPrev:hover,.slideGroup .sNext:hover{ border-color:#f60;  }
		.slideGroup .parBd ul{ overflow:hidden; zoom:1;   }
		.slideGroup .parBd ul li{ margin:0 8px; float:left; _display:inline; width:200px; overflow:hidden; }
		.slideGroup .parBd ul li .pic{ text-align:center; }
		.slideGroup .parBd ul li .pic img{ width:190px; height:155px; display:block;  padding:2px; }
		.slideGroup .parBd ul li .pic a:hover img{ border-color:#999;  }
		.slideGroup .parBd ul li .title h3{ color:#F33; font-size:16px;}
		.slideGroup .parBd ul li .title h3 b{ font-weight:normal; font-size:14px}
		.slideGroup .parBd ul li .title .name{ font-size:12px; height:36px; margin:5px 0px; line-height:18px; overflow:hidden}


		.gl-item {width: 238px;height: 394px;float: left;border: 1px solid #FFFFFF;position:relative}
		.gl-item .Price b {font-size: 22px;color: #FF4A4A;}
		.gl-item .Price span {color: #999999;padding: 0px 5px;}
		.gl-item .name {height: 40px;line-height: 18px;margin: 5px 0px;font-family: "新宋体"}
		.gl-item .Shop_name a{ display:block;font-size: 14px;margin-bottom: 10px;color: #666666; height:20px; overflow:hidden; line-height:18px; }
		.gl-item .icon_special{ background:url(../images/superscript_dot.png) no-repeat; position:absolute; width:65px; height:78px; top:0px; right:0px;}
		.gl-item .icon_special.tejia{ background-position:0px}
		.gl-item .icon_special.xinping{ background-position: -66px 0px;}

		.p-operate {overflow: hidden;margin-bottom: 10px;}
		.gl-item .p-o-btn {
			float: left;
			height: 30px;
			line-height: 30px;
			border: 1px solid #90b830;
			padding: 0 5px 0 24px;
			position: relative;
			background: #FFF;
			color: #999;
			font-family: "新宋体"
		}
		.gl-item .img {margin-bottom: 8px;}
		.gl-item .Borders {margin: 10px;width: 218px}
		.gl-item.hover {
			border: 1px solid #ddd;
			z-index: 1;
			border-color: #E9E9E9;
			-webkit-box-shadow: 0 0 2px 2px #F8F8F8;
			-moz-box-shadow: 0 0 2px 2px #f8f8f8;
			box-shadow: 0 0 2px 2px #F8F8F8;
		}
		.gl-item .p-o-btn.shop_cart {
			margin-left: -1px;
			width: 70px;
			padding: 0 5px 0 30px;
			color:#FFF;
			background-color:#90b830;
			border: 1px solid  #90b830;
		}
		.gl-item .p-o-btn.shop_cart:hover  em {background-position: 0 -460px;}
		.gl-item .p-o-btn.shop_cart em {background-position: 0 -487px;}
		.gl-item .p-o-btn.Collect em {background-position: 0 -411px;}
		.gl-item.hover .p-o-btn.Collect:hover {
			color: #90b830;
			z-index: 1;
			border-color: #90b830;
			text-decoration: none;
		}
		.gl-item .p-o-btn.Collect:hover {color: #FF0000;border: 1px solid #90b830;}
		.gl-item .p-o-btn.Collect:hover em {background-position: 0 -434px;}
		.gl-item .p-o-btn em {
			position: absolute;
			display: block;
			font-style: normal;
			left: 4px;
			top: 3px;
			width: 20px;
			height: 20px;
			background: url(../../images/search.ele.png) no-repeat 9999px 9999px;
			-webkit-transition: background-position .15s ease-in-out;
			-moz-transition: background-position .15s ease-in-out;
			transition: background-position .15s ease-in-out;
		}
		* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		body {
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			background-color: #f3f3f3;
		}

		.header {
			background-color: #f8b8f3;
			padding: 10px;
			color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.logo {
			font-size: 24px;
			font-weight: bold;
		}

		.nav-items {
			display: flex;
			gap: 10px;
		}

		.nav-items a {
			color: #fff;
			text-decoration: none;
			font-size: 14px;
			padding: 5px 10px;
			border-radius: 3px;
			transition: background-color 0.3s;
		}

		.nav-items a:hover {
			background-color: #4CAF50;
		}

		.banner {
			width: 100%;
		}

		.container {
			padding: 20px;
		}

		.search-form {
			display: flex;
			gap: 10px;
			margin-top: 30px;
		}

		.search-form input[type="text"] {
			flex: 1;
			padding: 10px;
			border: 1px solid #ccc;
			border-radius: 3px;
		}

		.search-form button {
			background-color: #5FB878;
			color: #fff;
			border: none;
			padding: 10px 15px;
			border-radius: 3px;
			cursor: pointer;
			transition: background-color 0.3s;
		}

		.search-form button:hover {
			background-color: #4CAF50;
		}

		.content-img {
			width: 100%;
		}

		.scan-form {
			display: flex;
			gap: 10px;
			margin-top: 20px;
		}

		.scan-form input[type="file"] {
			display: none;
		}

		.scan-form label {
			background-color: #a5b3ea;
			color: #fff;
			padding: 10px 15px;
			border-radius: 3px;
			cursor: pointer;
			transition: background-color 0.3s;
		}

		.scan-form label:hover {
			background-color: #4CAF50;
		}

		.scan-form p {
			margin: 0;
			font-size: 14px;
			color: #777;
		}

		.footer {
			background-color: #f2f2f2;
			padding: 20px;
			color: #777;
			text-align: center;
			font-size: 14px;
		}
		.scan-form {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 20px;
		}

		.scan-image-label {
			position: relative;
			cursor: pointer;
		}

		.scan-image {
			height: 50px;
			width: 50px;
			object-fit: contain;
		}

		.scan-image-label::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			/*background-color: rgba(0, 0, 0, 0.3);*/
			opacity: 0;
			transition: opacity 0.3s;
		}

		.scan-image-label:hover::before {
			opacity: 1;
		}

		.scan-image-label:hover .scan-image {
			filter: brightness(120%);
		}

		p {
			margin: 0;
			font-size: 14px;
			color: #777;
			margin-top: 10px;
			text-align: center;
		}

	</style>
</head>
<body>
<div class="header">
	<div class="logo"><spring:message code="system"/></div>
	<div class="nav-items">
		<a href="/base/login"><spring:message code="login"/></a>
		<a href="/base/admin/home"><spring:message code="adminHome"/></a>
	</div>
	<div class="language-switcher">
		<a href="?lang=zh">中文</a> | <a href="?lang=en">English</a>
	</div>
</div>

<div id="slideBox" class="slideBox">
	<div class="hd">
		<ul class="smallUl"></ul>
	</div>
	<div class="bd">
		<ul>
			<li><a href="#" target="_blank">
				<div style="background:url(/base/img/0179905acc7b3ea80121386765fc6b.jpg@1280w_1l_2o_100sh.jpg) no-repeat; background-position:center; width:100%; height:450px;"></div>
			</a></li>
			<li><a href="#" target="_blank">
				<div style="background:url(/base/img/7713fa02-1c9a-4398-960d-7da23febd2f7.jpg) no-repeat; background-position:center ; width:100%; height:450px;"></div>
			</a></li>
			<li><a href="#" target="_blank">
				<div style="background:url(/base/img/b19f3d764b599c13f7b402b1d30eea77.jpeg) no-repeat rgb(226, 155, 197); background-position:center; width:100%; height:475px;"></div>
			</a></li>
		</ul>
	</div>
	<!-- 下面是前/后按钮-->
	<a class="prev" href="javascript:void(0)"></a>
	<a class="next" href="javascript:void(0)"></a>
</div>

<div class="container">
	<form class="search-form">
		<input type="text" id="ncpid" value="ncp001-qy001" placeholder="<spring:message code='enterProductId'/>" required>
		<input type="button" onclick="search()" class="layui-btn btn-success" value="<spring:message code='trace'/>"></input>
	</form>

	<img src="/base/img/content.jpg" class="content-img">

	<form class="scan-form">
		<label for="scan-image" class="scan-image-label">
			<input type="file" id="scan-image" accept="image/*">
			<img src="/base/img/pro3.png" alt="<spring:message code='scan'/>" class="scan-image">
		</label>
		<p><spring:message code="scan"/></p>
	</form>
</div>

<div class="footer">
	&copy; 2024 <spring:message code="system"/>. <spring:message code="allRightsReserved"/>
</div>
<link rel="stylesheet" href="/base/layui/css/layui.css">
<script src="/base/layui/layui.all.js"></script>
<script>
	function search() {
		document.location.href="/base/info/product-info?ncpid=" + $("#ncpid").val();
	}
</script>
<script type="text/javascript">
	jQuery(".slideBox").slide({ titCell: ".hd ul", mainCell: ".bd ul", autoPlay: true, autoPage: true });
</script>
<script>
	document.getElementById("scan-image").addEventListener("click", function(event) {
		document.location.href="http://localhost:8080/base/scan";
	});
</script>
</body>
</html>

